<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.lb{
				width: 800px;
				
				margin: 10px auto;
			}
			#left-arrow{
				position: relative;
				top: -300px;
				display: inline-block;
			}
			#right-arrow{
				position: relative;
				top: -300px;
				right: -740px;
				display: inline-block;
			}
			.f{
				width: 300px;
			}
			span{
				margin: 0 12px ;
				width: 30px;
				height: 30px;
				background-color: darkgray;
				border-radius: 50%;
				display: inline-block;
				text-align: center;
				position: relative;
				top: -100px;
				right: -300px;
				font-size: 25px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="lb">
			<img src="img/1.jpg" id="img" width="800px" height="600px"/>
			<img src="img/btn_1.png" id="left-arrow"/>
			<img src="img/btn_r.png" id="right-arrow"/>
		<div id="num-btn"><span style="background: #f00;">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
		</div>
		<script type="text/javascript">
			var left=document.getElementById("left-arrow");
			var right=document.getElementById("right-arrow");
			var index=1;
			var btns=document.getElementById("num-btn").childNodes;
			for(var i=0;i<btns.length;i++){
				btns[i].onclick=(function(){
					var j=i+1;
					return function(){
						index=j;
						img.src="img/"+index+".jpg"
						changebg();
					}
				})();

			}
			function changebg(){
				for(var  i=0; i<btns.length;i++){
					btns[i].style.background="";
				}
				btns[index-1].style.background="#f00";
//				btns[index>5] index=1;
//				img.src="img/"+index+
			}
			 var moveleft=function(){
				index++;
				if(index>5) index=1;
				img.src="img/"+index+".jpg"
			    changebg();
			 }
			right.onclick=moveleft;
			left.onclick=function(){
				index--;
				if(index<1)index=5;
				img.src="img/"+index+".jpg"
				changebg();
			}(moveleft,500);
			var lb=document.getElementsByClassName("lb")[0];
			lb.onmouseover=function(){
				clearInterval(timer);
			};
			lb.onmouseout=function(){
				timer=setInterval(moveleft,500);
			}
		</script>
	</body>
</html>

	